<template>
  <div
    v-if="!isDelete"
    @mouseenter="setShowFocus"
    @mouseleave="setShowFocus"
    style="
      background-color: #ffffff;
      box-shadow: 2px 2px 10px 2px #ddd;
      padding: 10px 0 0px 0;
      margin-bottom: 10px;
    "
  >
    <div class="item-head">
      <div class="user-head">
        <a-popover trigger="hover" placement="rightTop">
          <template #content>
            <div>
              <div
                style="
                  padding-top: 0px;
                  display: flex;
                  /* width: 200px; */
                  /* height: 50px; */
                  margin-left: 4%;
                "
              >
                <img
                  class="head-img"
                  :src="forum.authorDetail.headImg"
                  alt=""
                />
                <div style="margin-left: 10px">
                  <div style="font-size: 14px; margin-top: 2px">
                    {{ forum.authorDetail.userName }}
                  </div>
                  <div style="font-size: 12px; color: #999; margin-top: 3px">
                    {{
                      forum.authorDetail.sex +
                      " | " +
                      forum.authorDetail.occupation
                    }}
                  </div>
                </div>
              </div>
              <div style="font-size: 12px; margin-top: 4px">
                {{ forum.authorDetail.briefIntroduction }}
              </div>
            </div>
          </template>
          <img class="head-img" :src="forum.headImg" alt="" />
        </a-popover>
      </div>
      <div class="user-name">
        <!-- <div></div> -->
        <div style="display: flex">
          <div style="font-size: 14px; margin-top: 2px">{{ forum.name }}</div>
          <span v-if="!showFocus || isFocus || forum.isFocus"> </span>
          <button v-else class="focusDiv" @click="addFocus">
            {{ "+ 关注" }}
          </button>
        </div>
        <div style="font-size: 12px; color: #999; margin-top: 3px">
          {{
            forum.time.getMonth() +
            1 +
            "-" +
            forum.time.getDate() +
            " " +
            forum.time.getHours() +
            ":" +
            forum.time.getMinutes()
          }}
        </div>
      </div>
      <a-popconfirm
        title="您将删除这条动态?"
        ok-text="Yes"
        cancel-text="No"
        @confirm="deleteMyForum(index)"
      >
        <div v-if="showFocus && forum.uid == uid">
          <img class="deleteDiv" src="../../assets/delete.png" />
        </div>
      </a-popconfirm>
    </div>
    <div class="item-body">
      <!-- 文字内容 -->
      <div style="font-size: 13px; margin-top: 15px">
        <div>
          {{ forum.contentText }}
        </div>
      </div>
      <!-- 图片内容 -->
      <div class="body-imgs">
        <a-image-preview-group>
          <div
            class="img-box"
            v-for="(item, index) in forum.contentImg"
            :key="index"
          >
            <div class="img_container">
              <a-image class="body-img" :src="item" alt="" />
            </div>
          </div>
        </a-image-preview-group>
      </div>
    </div>
    <div class="item-foot">
      <!-- <div style="float: right;"> -->
      <div style="margin-left: 70%; margin-top: 3px">
        <div style="display: inline-block" @click="setLike">
          <img
            v-if="isLike == 0"
            class="icon-sty"
            src="../../assets/love1.png"
            alt=""
          />
          <img v-else class="icon-sty" src="../../assets/love2.png" alt="" />
          <div class="icon-text">
            {{ likeNum }}
          </div>
        </div>
        <div style="display: inline-block" @click="showComment">
          <img class="icon-sty" src="../../assets/comment1.png" alt="" />
          <div v-if="isShowComment" class="icon-text" style="font-size: 13px">
            收起
          </div>
          <div v-else class="icon-text">
            {{ forum.comment }}
          </div>
        </div>

        <!-- <img class="icon-sty" src="../../assets/collect.png" alt="" /> -->
      </div>
      <!-- <div
        style="height: 0.5px;width: 96%; margin-left: 2%; background-color: #ddd;margin-top: 5px;margin-bottom: 8px;"
      ></div> -->
      <div v-if="isShowComment" class="comments">
        <span v-for="(comment, index1) in forum.comments" :key="index1">
          <!-- <span v-for="(comment, index2) in item" :key="index2"> -->
          <div class="comment-div" :class="{ 'comment-div-2': comment.name2 }">
            <div class="comment-head">
              <img class="comment-head-img" :src="comment.headImg" alt="" />
            </div>
            <div class="comment-content">
              <div class="comment-name">
                <div class="comment-name-text">
                  <span>{{ comment.name1 }}</span>
                  <span v-if="comment.name2">
                    <span style="color: #666"> 回复 </span
                    ><span>{{ comment.name2 }}</span>
                  </span>
                </div>
                <div
                  class="time1"
                  :class="{ time2: comment.name2 }"
                  style="
                    font-size: 12px;
                    color: #999;
                    margin-top: 3px;
                    float: right;
                  "
                >
                  {{
                    comment.time.getMonth() +
                    1 +
                    "-" +
                    comment.time.getDate() +
                    " " +
                    comment.time.getHours() +
                    ":" +
                    comment.time.getMinutes()
                  }}
                </div>
              </div>
              <div class="comment-text">
                {{ comment.content }}
              </div>
            </div>
          </div>
          <!-- </span> -->
        </span>
        <div style="display: flex; width: 100%; margin-top: 15px">
          <div class="my-comment">
            <input
              v-model="commentText"
              class="my-input"
              placeholder="写下你的评论..."
            />
          </div>
          <div class="submit">
            <button v-if="haveComment" class="button" @click="addComment">
              发送
            </button>
            <button v-else class="disableButton" disabled>发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ForumItem",
  props: { key: Number, forum: Object },
  data() {
    return {
      uid: this.$store.state.id,
      isFocus: false,
      isShowComment: false,
      commentText: "",
      isLike: 0,
      likeNum: 0,
      haveComment: false,
      showFocus: false,
      isDelete: false,
      // forum: {},
      //   forum: {
      //     headImg: "../../assets/head.jpg",
      //     name: "STAR百事通",
      //     time: new Date(),
      //     contentText: "夕阳无限好，只是近黄昏\n今天天气不错~",
      //     contentImg: ["../../assets/1.jpg"],
      //     love: [1, 12], // 是否点赞，点赞人数
      //     comment: 23, // 评论人数
      //     collect: [1, 2], // 是否收藏，收藏人数
      //     comments: [
      //       {
      //         headImg: "../../assets/head.jpg",
      //         name1: "STAR百事通",
      //         name2: "",
      //         time: new Date(),
      //         content:
      //           "浅浅高兴一下吧，我们小张就是很棒，而且现存的不完美在四年的学习中也会变完美，我相信中戏的老师也相信张真源[害羞]",
      //       },
      //     ],
      //   },
    };
  },
  methods: {
    showComment() {
      this.isShowComment = !this.isShowComment;
    },
    async addComment() {
      try {
        // console.log("动态id-", this.forum.did, "--- 用户id-1");
        let newComment = {
          uid: this.uid,
          dynamicId: this.forum.did,
          commentContent: this.commentText,
        };
        // console.log("要添加的评论---", newComment);
        await this.$axios.post("/comment/add", newComment);
        // let data = res.data.data;
        // console.log("添加成功---", res);
        let comment = {
          headImg:
            "http://47.108.176.163:7777/img_user_head/" + this.uid + ".png",
          name1: "",
          time: new Date(),
          content: this.commentText,
        };
        this.commentText = "";
        let res = await this.$axios.get(
          "/user/selectOneByUid?uid=" + this.$store.state.uid
        );
        comment.name1 = res.data.data.userName;
        this.forum.comments.push(comment);
      } catch (error) {
        // console.log("添加评论失败---", error);
      }
    },
    async deleteMyForum(key) {
      try {
        let res = await this.$axios.post(
          "/dynamic/delete?id=" + this.forum.did
        );
        console.log("删除了一条动态---", res.data);
        this.isDelete = true;
      } catch (error) {
        console.log(error);
      }
    },
    async setLike() {
      this.isLike = !this.isLike;
      // console.log("👍", this.isLike);
      if (this.isLike) {
        let res = await this.$axios.post(
          "/dynamic/addLikeById?id=" + this.forum.did + "&add=true"
        );
        console.log(res.data);
        this.likeNum++;
      } else {
        this.likeNum--;
      }
    },
    setShowFocus() {
      this.showFocus = !this.showFocus;
    },
    async addFocus() {
      let uid = this.uid;
      try {
        await this.$axios.post(
          "/focus/add?uid=" + uid + "&fid=" + this.forum.uid
        );
        this.isFocus = true;
      } catch (error) {
        console.log(error);
      }
    },
  },
  async mounted() {
    this.isFocus = this.forum.isFocus;
    this.isLike = this.forum.love[0];
    this.likeNum = this.forum.love[1];
    // console.log("传来的动态", this.forum);
  },
  watch: {
    commentText() {
      if (this.commentText.replace(/^\s+|\s+$/g, "") == "") {
        this.haveComment = false;
      } else {
        this.haveComment = true;
      }
    },
  },
};
</script>

<style scoped>
.item-head {
  padding-top: 10px;
  display: flex;
  width: 92%;
  height: 50px;
  margin-left: 4%;
}
.user-head {
  width: 11%;
  /* background-color: aquamarine; */
}
.head-img {
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.user-name {
  width: 83%;
  /* background-color: beige; */
}
.focusDiv {
  margin-left: 15px;
  border: 1px solid rgb(244, 141, 141);
  color: rgb(233, 87, 87);
  background-color: #fff;
  padding: 2px 12px 2px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.focusDiv:hover {
  cursor: pointer;
}
.deleteDiv {
  width: 20px;
  margin-top: 10px;
}
.deleteDiv:hover {
  cursor: pointer;
}
.notShowFocus {
  border: none;
  color: #fff;
  background-color: #fff;
}
.item-body {
  padding-top: 5px;
  width: 92%;
  /* height: 50px; */
  margin-left: 4%;
}
.body-imgs {
  margin-top: 10px;
  /* background-color: #999; */
  display: flex;
  flex-wrap: wrap;
}
.img-box {
  width: 23%;
  margin-right: 2%;
  margin-bottom: 10px;
}
.body-img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.img_container {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  /* overflow: hidden; */
  margin: 0;
  position: relative;
}
::v-deep .ant-image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  margin: 0;
  position: relative;
}
::v-deep img.ant-image-img.body-img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.item-foot {
  padding-top: 5px;
  width: 92%;
  /* height: 50px; */
  margin-left: 4%;
}
.icon-sty {
  width: 25px;
  margin-left: 20px;
}
.comments {
  padding-top: 0px;
  /* display: flex; */
  width: 100%;
  padding-bottom: 20px;
  /* height: 50px; */
  /* margin-left: 4%; */
}
.comment-div {
  display: flex;
  margin-top: 7px;
}
.comment-div-2 {
  width: 94%;
  margin-left: 6%;
}
.comment-head {
  width: 7%;
}
.comment-head-img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.comment-content {
  width: 93%;
}
.comment-name {
  display: flex;
}
.comment-name-text {
  font-size: 13px;
  margin-top: 1px;
  width: 85%;
  color: #336ebc;
}
.comment-text {
  font-size: 12px;
  margin-top: 2px;
  /* color: #555; */
}
.my-comment {
  width: 80%;
}
.my-input {
  /* min-height: 25px; */
  padding: 6px 12px;
  height: auto;
  width: 100%;
  border: 1px solid #bbb;
  font-size: 13px;
}
.submit {
  width: 15%;
  margin-left: 8%;
  /* background-color: #336ebc; */
}
.button {
  padding: 5.5px 20px;
  color: #ffffff;
  background-color: #06f;
  border: none;
  font-size: 13px;
  border-radius: 3px;
}
.disableButton {
  padding: 5.5px 20px;
  color: #999;
  background-color: #eee;
  border: none;
  font-size: 13px;
  border-radius: 3px;
}
.icon-text {
  font-size: 14px;
  margin-bottom: 20px;
  margin-left: 2px;
  display: inline-block;
  color: #777;
  padding-top: 6px;
}
</style>
